import React from 'react';
import axios from 'axios';
import PropTypes from 'prop-types'

class Main extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            banners: [...props.banners]
        };
    }
    render() {
        const { clickField } = this.props;
        const { banners } = this.state
        return (
            <div onClick={e => clickField('Body')}>
                <h1>Body</h1>
                <ul>
                    {banners.map((item, index) => <li key={index}>{item}</li>)}
                </ul>
            </div>
        )
    }

    componentDidMount() {
        axios.get('http://123.207.32.32:8000/home/multidata').then((response) => {
            const banners = response.data.data.banner.list.map(item => item.title);
            console.log('接口返回', banners);
            this.setState({
                banners: [...this.state.banners, ...banners]
            });
        })
    }
}

Main.propTypes = {
    banners: PropTypes.arrayOf(PropTypes.string)
}
Main.defaultProps = {
    banners: ['默认轮播']
}

export default Main